<div class="series" >
    <!--Bloc d'ajout de série-->
    <div class="ajoutSerie" ng-show="statutServeurRest != 'na'">
        <h2 translate="series.ajout.titre"></h2>
        <div class="container">
            <div class="row">
                <form name="formAjoutSerie"  class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-sm-1 control-label" for="nomNouvelleSerie" translate="series.ajout.nom"></label>
                        <div class="col-sm-3">
                            <input ng-model="serieAAjouter.nom" type="text" size="30" class="form-control" id="nomNouvelleSerie" placeholder="{{'series.ajout.nom' | translate}}" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-1 control-label" for="saisonNouvelleSerie" translate="series.ajout.saison"></label>
                        <div class="col-sm-2">
                            <input ng-model="serieAAjouter.saison"  min="0"  type="number" class="form-control" id="saisonNouvelleSerie" placeholder="{{'series.ajout.saison' | translate}}" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-1 control-label" for="episodeNouvelleSerie" translate="series.ajout.episode"></label>
                        <div class="col-sm-2">
                            <input ng-model="serieAAjouter.episode"  min="0"  type="number" class="form-control" id="episodeNouvelleSerie" placeholder="{{'series.ajout.episode' | translate}}" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-1 control-label" for="qualiteNouvelleSerie" translate="series.ajout.qualite"></label>
                        <div class="col-sm-2">
                            <select ng-model="serieAAjouter.qualite" id="qualiteNouvelleSerie" class="form-control" ng-options="qualite.code as qualite.libelle for qualite in qualites" ></select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-1 control-label" for="versionNouvelleSerie" translate="series.ajout.version"></label>
                        <div class="col-sm-2">
                            <select ng-model="serieAAjouter.version"  id="versionNouvelleSerie" class="form-control" ng-options="version.code as version.libelle for version in versions" ></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-1 col-sm-10">
                            <button ng-disabled="formAjoutSerie.$invalid"  ng-show="statutServeurRest == 'ok'" type="submit" ng-click="ajoutSerie()" class="btn btn-default" translate="series.ajout.ajouter"></button>
                            <button ng-disabled="formAjoutSerie.$invalid" type="submit" ng-click="rechercherSerie()" class="btn btn-default" translate="series.ajout.rechercher"></button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="row">
                <button ng-disabled="isEnregistrementAllowed()" type="submit" class="btn btn-primary boutonEnregistrer" ng-show="statutServeurRest == 'ok'" ng-click="showPopupConfirmEnregistrement()">{{'boutons.enregistrer' | translate}} </button>
            </div>
        </div>
    </div>

    <!--Tableau des séries-->
    <div class="listeSeries"  ng-show="series.length > 0">
        <h2 translate="series.table.titre"></h2>
        <table class="table table-condensed">
            <thead>
            <tr>
                <th translate="series.table.colonne.active"></th>
                <th translate="series.table.colonne.nom"></th>
                <th translate="series.table.colonne.saison"></th>
                <th translate="series.table.colonne.episode"></th>
                <th translate="series.table.colonne.qualite"></th>
                <th translate="series.table.colonne.version"></th>
                <th hs-check-roles-show translate="series.table.colonne.action"></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="serie in series track by $index" ng-class="getCssClassForSerie(serie)">
                <!--Colonne Active-->
                <td  >
                    <div class="colonneCheckbox">
                        <label class="sr-only" for="activeSerie" translate="series.table.colonne.active">}</label>
                        <input hs-check-roles-enable type="checkbox" id="activeSerie"  ng-model="serie.active">
                    </div>
                </td>
                <!--Colonne Nom-->
                <td>
                    <label class="sr-only" for="nomSerie" translate="series.ajout.nom"></label>
                    <input hs-check-roles-enable  ng-model="serie.nom" type="text" class="form-control" id="nomSerie" placeholder="{{'series.ajout.nom' | translate}}" required>
                </td>
                <!--Colonne saison-->
                <td>
                    <label class="sr-only" for="saisonSerie" translate="series.ajout.saison"></label>
                    <input hs-check-roles-enable ng-model="serie.saison" min="0"   type="number" class="form-control smallField" id="saisonSerie" placeholder="{{'series.ajout.saison' | translate}}" required>
                </td>
                <!--Colonne episode-->
                <td>
                    <label class="sr-only" for="episodeSerie" translate="series.ajout.episode"></label>
                    <input hs-check-roles-enable ng-model="serie.episode"  min="0"   type="number" class="form-control smallField" id="episodeSerie" placeholder="{{'series.ajout.episode' | translate}}" required>
                </td>
                <!--Colonne version-->
                <td>
                    <label class="sr-only" for="qualiteSerie" translate="series.ajout.qualite"></label>
                    <select hs-check-roles-enable ng-model="serie.qualite" id="qualiteSerie" class="form-control" ng-options="qualite.code as qualite.libelle for qualite in qualites" ></select>
                </td>
                <!--Colonne version-->
                <td>
                    <label class="sr-only" for="versionSerie"  translate="series.ajout.version"></label>
                    <select hs-check-roles-enable ng-model="serie.version"  id="versionSerie" class="form-control" ng-options="version.code as version.libelle for version in versions" ></select>
                </td>
                <!--Bouton supprimer-->
                <td hs-check-roles-show>
                    <div class="colonneBouton">
                        <button type="submit" ng-click="removeSerie(serie)" class="btn btn-primary btn-xs">x</button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>